import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

/* 2 - Props & Components */
/* 组件 - 自定义组件必须大写字母开头, 组件不能修改自身props */
/* props是一个简单结构的对象, 用于把父组件中的数据或方法传递给子组件, 供子组件使用 */
/* props是只读的, 不允许修改 */

// 函数定义组件
/* function Welcome1(props) {
    console.log(props); // {name: "lala"}
    return <h1>Hello, {props.name}</h1>;
}
 */
// Class定义组件
class Welcome2 extends React.Component {
    // constructor (props) {
    //     super(props);
    // }
    render() {
        // const {name} = this.props; // 解构赋值提取
        return <h1>Hello, {this.props.name}</h1>
    }
}

const name = ['Lulu', 'Lili', 'Lala'];
const comment = {
    date: new Date(),
    text: 'I hope you enjoy learning React!',
    author: {
        name: 'Hello Kitty',
        avatarUrl: 'https://placekitten.com/g/64/64',
    },
};

// 渲染组件
// React元素自定义组件时, 会将JSX所接收的属性以及子组件转换为单个对象传递给组件, 这个对象被称之为 “props”
// 此时的props为 {name: "Lulu"}
const element = <Welcome2 name={name[0]} />;

// 组合组件
class App extends React.Component {
    render() {
        return (
            <div>
                <Welcome2 name={name[0]} />
                <Welcome2 name={name[1]} />
                <Welcome2 name={name[2]} />
                <Comment
                    date={comment.date}
                    text={comment.text}
                    author={comment.author}
                />
            </div>
        );
    }
}

// 提取组件, 把组件拆分成更小的组件
function Comment(props) {
    return (
        <div className="Comment">
            {/* UserInfo下有多个嵌套, 提取它 */}
            {/* <div className="UserInfo">
                <img className="Avatar"
                    src={props.author.avatarUrl}
                    alt={props.author.name}
                />
                <div className="UserInfo-name">
                    {props.author.name}
                </div>
            </div> */}
            <UserInfo user={props.author} />
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="Comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

function Avatar(props) {
    return (
        <img className="Avatar"
            // Avatar内部知道"author"如何使用, 但不知道在Comment组件内部如何渲染, 所以改为通用名User
            // 从组件自身的角度命名props, 而不是依赖于调用组件的上下文命名
            // user对应Comment下的author
            src={props.user.avatarUrl}
            alt={props.user.name}
        />
    );
}

function UserInfo(props) {
    return (
        <div className="UserInfo">
            <Avatar user={props.user} />
            <div className="UserInfo-name">
                {props.user.name}
            </div>
        </div>
    );
}

function formatDate(date) {
    return date.toLocaleDateString();
}



ReactDOM.render(
    // element, // 这里不能写成<Welcome2/>, 直接写没有props值
    <App />,
    document.getElementById('root')
)